<template>
  <div id="formContainer" class="dwo">
    <div class="formLeft">
      <img src="../assets/images/avatar.jpg">
    </div>
    <div class="formRight">
      <!-- Forgot password form -->
      <form id="forgot" class="otherForm">
        <header>
          <h1>忘记密码</h1>
          <p>输入邮箱找回密码</p>
        </header>
        <section>
          <label>
            <p>邮箱</p>
            <input type="email" placeholder=" ">
            <div class="border"></div>
          </label>
          <button type="submit">发送邮件</button>
        </section>
        <footer>
          <button type="button" class="forgotBtn">返回</button>
        </footer>
      </form>

      <!-- Login form -->
      <form id="login">
        <header>
          <h1>欢迎回来</h1>
          <p>请先登录</p>
        </header>
        <section>
          <label>
            <p>用户名</p>
            <input type="text" placeholder=" ">
            <div class="border"></div>
          </label>
          <label>
            <p>密码</p>
            <input type="password" placeholder=" ">
            <div class="border"></div>
          </label>
          <button type="submit">登 录</button>
        </section>
        <footer>
          <button type="button" class="forgotBtn">忘记密码？</button>
          <button type="button" class="registerBtn">新用户？</button>
        </footer>
      </form>

      <!-- Register form -->
      <form id="register" class="otherForm">
        <header>
          <h1>用户注册</h1>
          <p>注册后享受更多服务</p>
        </header>
        <section>
          <label>
            <p>用户名</p>
            <input type="text" placeholder=" ">
            <div class="border"></div>
          </label>
          <label>
            <p>邮箱</p>
            <input type="email" placeholder=" ">
            <div class="border"></div>
          </label>
          <label>
            <p>密码</p>
            <input type="password" placeholder=" ">
            <div class="border"></div>
          </label>
          <label>
            <p>重复密码</p>
            <input type="password" placeholder=" ">
            <div class="border"></div>
          </label>
          <button type="submit">注 册</button>
        </section>
        <footer>
          <button type="button" class="registerBtn">返回</button>
        </footer>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    components: {

    },
    methods: {}
  }
</script>

<style lang="scss">
  body {
    width: 100vw;
    height: 100vh;
    background: url(../assets/images/bg.jpg) center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #formContainer {
    display: flex;
    align-items: center;
    transition: 0.2s ease;
    transition-delay: 0.3s;

    .formLeft {
      width: 142px;
      height: 342.5px;
      background: #fff;
      border-radius: 5px 0px 0px 5px;
      padding: 0px 35px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      img {
        display: block;
        width: 72px;
        border-radius: 50%;
        box-shadow: 0 5px 5px rgb(0, 0, 0/ 20%);
      }
    }

    .formRight {
      width: 350px;
      height: 342.5px;
      position: relative;
      overflow: hidden;
      border-radius: 0 5px 5px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .formRight:before {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      width: calc(100% + 20px);
      height: calc(100% + 20px);
      background: url("../assets/images/bg.jpg") center/cover fixed;
      box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
      filter: blur(5px);
    }

    .formRight form {
      position: relative;
      width: 350px;
      padding: 25px;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
    }

    .formRight form header {
      color: #fff;
      text-align: center;
      margin-bottom: 15px;
    }

    .formRight form header h1 {
      margin: 0;
      font-weight: 400;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .formRight form header p {
      margin: 5px 0 0;
      opacity: 0.5;
      font-size: 14px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .formRight form section label {
      display: block;
      margin-bottom: 15px;
      position: relative;
    }

    .formRight form section label p {
      color: #fff;
      margin: 0 0 10px 0;
      font-weight: 600;
      font-size: 12px;
      opacity: 0.5;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .formRight form section label input {
      width: 100%;
      display: block;
      border: none;
      background: transparent;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 0 0 10px;
      box-sizing: border-box;
      font-weight: 600;
    }

    .formRight form section label input:focus~.border {
      transform: scale(1, 1);
    }

    .formRight form section label input:not(:-moz-placeholder-shown)~.border {
      transform: scale(1, 1);
    }

    .formRight form section label input:not(:-ms-input-placeholder)~.border {
      transform: scale(1, 1);
    }

    .formRight form section label input:not(:placeholder-shown)~.border {
      transform: scale(1, 1);
    }

    .formRight form section label .border {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #fff;
      transform: scale(0, 1);
      transition: 0.2s ease;
    }

    .formRight form section label:last-child {
      margin-bottom: 0;
    }

    .formRight form section button {
      background: #00897B;
      border: none;
      width: 100%;
      padding: 10px 0;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
    }

    .formRight form section button:hover {
      background: #007f72;
    }

    .formRight form footer {
      margin-top: 15px;
      display: flex;
    }

    .formRight form footer button {
      background: transparent;
      padding: 0;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 12px;
      font-weight: bold;
      flex: 1;
      opacity: 0.5;
    }

    .formRight form footer button:hover {
      opacity: 1;
    }

    .formRight form.otherForm {
      top: 0;
      left: 0;
      position: absolute;
      background: #fff;
      height: 100%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 0;
      padding: 25px 0;
      transition: 0.2s ease;
      transition-delay: 0.2s;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
    }

    .formRight form.otherForm header {
      color: #000;
      opacity: 0;
      transition: 0.2s ease;
      transition-delay: 0s;
    }

    .formRight form.otherForm p {
      color: #000;
    }

    .formRight form.otherForm section {
      opacity: 0;
      transition: 0.2s ease;
      transition-delay: 0s;
    }

    .formRight form.otherForm footer {
      border-top-color: rgba(0, 0, 0, 0.1);
      opacity: 0;
    }

    .formRight form.otherForm footer button {
      color: #000;
    }

    .formRight form.otherForm input {
      border-color: rgba(0, 0, 0, 0.1);
      color: #000;
    }

    .formRight form.otherForm .border {
      background: #000;
    }

    .formRight form.otherForm.toggle {
      width: 100%;
      padding: 25px;
      transition-delay: 0s;
    }

    .formRight form.otherForm.toggle header,
    .formRight form.otherForm.toggle section,
    .formRight form.otherForm.toggle footer {
      opacity: 1;
      transition-delay: 0.3s;
    }

    button,
    hr,
    input {
      overflow: visible
    }

    audio,
    canvas,
    progress,
    video {
      display: inline-block
    }

    progress,
    sub,
    sup {
      vertical-align: baseline
    }

    html {
      font-family: sans-serif;
      line-height: 1.15;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%
    }

    body {
      margin: 0
    }

    menu,
    article,
    aside,
    details,
    footer,
    header,
    nav,
    section {
      display: block
    }

    h1 {
      font-size: 2em;
      margin: .67em 0
    }

    figcaption,
    figure,
    main {
      display: block
    }

    figure {
      margin: 1em 40px
    }

    hr {
      box-sizing: content-box;
      height: 0
    }

    code,
    kbd,
    pre,
    samp {
      font-family: monospace, monospace;
      font-size: 1em
    }

    a {
      background-color: transparent;
      -webkit-text-decoration-skip: objects
    }

    a:active,
    a:hover {
      outline-width: 0
    }

    abbr[title] {
      border-bottom: none;
      text-decoration: underline;
      text-decoration: underline dotted
    }

    b,
    strong {
      font-weight: bolder
    }

    dfn {
      font-style: italic
    }

    mark {
      background-color: #ff0;
      color: #000
    }

    small {
      font-size: 80%
    }

    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative
    }

    sub {
      bottom: -.25em
    }

    sup {
      top: -.5em
    }

    audio:not([controls]) {
      display: none;
      height: 0
    }

    img {
      border-style: none
    }

    svg:not(:root) {
      overflow: hidden
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: sans-serif;
      font-size: 100%;
      line-height: 1.15;
      margin: 0
    }

    button,
    input {}

    button,
    select {
      text-transform: none
    }

    [type=submit],
    [type=reset],
    button,
    html [type=button] {
      -webkit-appearance: button
    }

    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner,
    button::-moz-focus-inner {
      border-style: none;
      padding: 0
    }

    [type=button]:-moz-focusring,
    [type=reset]:-moz-focusring,
    [type=submit]:-moz-focusring,
    button:-moz-focusring {
      outline: ButtonText dotted 1px
    }

    fieldset {
      border: 1px solid silver;
      margin: 0 2px;
      padding: .35em .625em .75em
    }

    legend {
      box-sizing: border-box;
      color: inherit;
      display: table;
      max-width: 100%;
      padding: 0;
      white-space: normal
    }

    progress {}

    textarea {
      overflow: auto
    }

    [type=checkbox],
    [type=radio] {
      box-sizing: border-box;
      padding: 0
    }

    [type=number]::-webkit-inner-spin-button,
    [type=number]::-webkit-outer-spin-button {
      height: auto
    }

    [type=search] {
      -webkit-appearance: textfield;
      outline-offset: -2px
    }

    [type=search]::-webkit-search-cancel-button,
    [type=search]::-webkit-search-decoration {
      -webkit-appearance: none
    }

    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit
    }

    summary {
      display: list-item
    }

    [hidden],
    template {
      display: none
    }

    /*# sourceMappingURL=normalize.min.css.map */
  }
</style>
